import React from "react";
import * as _lodash from "lodash";
import { useEditStore } from "@/context/editStore/index";
// 编辑器封装的组件
import {WrapTitle, LabeInput, CardBoxRow, LabeSlideFlex, ColorPickFlex, LayoutSwitchFlex} from "../../../components";
import "./index.less";

function HeBannerControlConfig(): JSX.Element {
    const {state, dispatch} = useEditStore();
    // 配置属性
    const curData = _lodash.cloneDeep(state.curSelectedAssembly);
    console.log("----banner--");
    console.log(curData);
    const list = _lodash.cloneDeep(state.assemblyList);
    const {data = {}} = curData;
    const {resources = {}} = data;
    const inputHandleChange = (value: string | number) => {
        _lodash.set(curData, "data.resources.value.value", value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };

    const layoutChange = (value: string) => {
        console.log("-layoutChange-");
        console.log(value);
        _lodash.set(curData, "data.resources.attrs.child.model.value", value);
        dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
        const index = list.findIndex((item: any) => {
            return item?.onlyCode == curData.onlyCode;
        });
        list.splice(index, 1, curData);
        dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
    };

    // 处理样式方法
    const handleStyles = (child: any) => {
        const htmlNode = [];
        const numberArr = ["pageTopBottomPadding","pageLeftRightPadding","cmpRadius"];
        const strArr = [ "cmpBackground"];
        const list = _lodash.cloneDeep(state.assemblyList);
        console.log("----handleStyles---");
        console.log(child);
        const styleChange = (value: any, str: string) => {
            if([...numberArr, ...strArr].indexOf(str) > -1) {
                _lodash.set(curData, `data.resources.styles.child.${str}.value`, value);
                dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
                const index = list.findIndex((item: any) => {
                    return item?.onlyCode == curData.onlyCode;
                });
                list.splice(index, 1, curData);
                dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
            }
        };

        if(!child) {
            return null;
        }
        for (const key in child) {
            if(numberArr.indexOf(key) > -1) {
                htmlNode.push(<LabeSlideFlex key={key} slide={child?.[key]} onChange={(value)=>styleChange(value, key)}></LabeSlideFlex>);
            }
            
            if(strArr.indexOf(key) > -1) {
                htmlNode.push(<ColorPickFlex  key={key} color={child?.[key]} onChange={(value) => {styleChange(value, key)}}></ColorPickFlex>);
            }
        }
        return htmlNode;
    };
    // 属性处理
    const handleAttrs = (child: any) => {
        const htmlNode = [];
        const numberArr = ["autoplay","loop","model", "indicatorDots", "vertical"];
        const list = _lodash.cloneDeep(state.assemblyList);
        console.log("----handleAttrs---");
        console.log(child);
        const attrsChange = (value: any, str: string) => {
            if([...numberArr].indexOf(str) > -1) {
                _lodash.set(curData, `data.resources.attrs.child.${str}.value`, value);
                dispatch({type: "SET_SELECT_ASSEMBLY", payload: {curSelectedAssembly: curData}} );
                const index = list.findIndex((item: any) => {
                    return item?.onlyCode == curData.onlyCode;
                });
                list.splice(index, 1, curData);
                dispatch({type: "SET_ASSEMBLY_LIST", payload: {assemblyList: list}} );
            }
        };

        if(!child) {
            return null;
        }
        for (const key in child) {
            if(numberArr.indexOf(key) > -1) {
                htmlNode.push(<LayoutSwitchFlex key={key} label={child?.[key].label} type={child?.[key].type}  value={child?.[key].value} onChange={(value)=>attrsChange(value, key)}></LayoutSwitchFlex>);
            }
            
            // if(strArr.indexOf(key) > -1) {
            //     htmlNode.push(<ColorPickFlex  key={key} color={child?.[key]} onChange={(value) => {styleChange(value, key)}}></ColorPickFlex>);
            // }
        }

        return htmlNode;
    };


    const handleList = (list: any) => {
        type VALUE_ITEM = {
            id: string,
            image: string
        }
        const lsitNode = list?.value.map((item: VALUE_ITEM) => {
            return (
                <div key={item?.id} className="card-box">
                    <CardBoxRow>
                        <span>{list?.child?.image?.label}</span>
                        <div className="card-img-box" >
                            <img className="card-img" src={item.image} alt="" />
                        </div>
                    </CardBoxRow>
                    <CardBoxRow>
                        <span>{list?.child?.jump?.label}</span>
                        <span>选择跳转到的页面</span>
                    </CardBoxRow>
                </div>
            );
        });
        return lsitNode;
    };

    
    return (
        <div className="box-right-all">
            <div className="right-all-title">{data.name}</div>
            <div className="right-all-value">
                <WrapTitle title={resources?.list?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleList(resources?.list)}
                    {/* <LabeInput onChange={inputHandleChange} label="文本" value={resources?.value?.value} ></LabeInput> */}
                </div>
            </div>
            <div className="right-all-attrs">
                <WrapTitle  title={resources?.attrs?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleAttrs(resources?.attrs?.child)}
                    {/* {resources?.attrs?.child?.model &&
                    <LayoutFlex 
                        defaultValue={resources?.attrs?.child?.model} 
                        options={resources?.attrs?.child?.model?.data}
                        onChange={layoutChange}
                    ></LayoutFlex>} */}
                </div>
            </div>
            <div  className="right-all-style">
                <WrapTitle title={resources?.styles?.label}></WrapTitle>
                <div className="right-all-value-box">
                    {handleStyles(resources?.styles?.child)}
                </div>
            </div>
        </div>
    );
};
export default HeBannerControlConfig;